<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/hanzimu.css">
  <title>22003170129韩梓慕</title>
</head>

<body>
  <header>
    <nav class="han-head">
        <div class="han-top">
          <div id="han-logo"><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E9%A1%B9%E7%9B%AE%E6%95%B4%E4%BD%93/index.html"></a></div>
          <!-- 顶部导航栏 -->
          <ul class="han-list">
              <li><a href="#" class="han-item active">发现音乐</a></li>
              <li><a href="#">我的音乐</a></li>
              <li><a href="#">关注</a></li>
              <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/fifth.html">商城</a></li>
              <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/sixth.html">音乐人</a></li>
              <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/fourth.html">个人设置</a></li>
              <li class="han-hot"></li>
          </ul>
          <!-- 右侧搜索框以及用户登录区域 -->
          <ul class="han-right-list">
            <li class="han-search-wrap"><input type="search" placeholder="音乐/视频/电台/用户"></li>
            <li><a href="#">创作者中心</a></li>
            <li><a href="#">登录</a></li>
          </ul>
        </div>
    </nav>

    <nav class="han-middle-nav">
        <div class="han-inner">
            <ul>
            <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/second.html">推荐歌单</a></li>
            <li><a href="#">排行榜</a></li>
            <li><a href="">云推歌</a></li>
            <li><a href="#">主播电台</a></li>
            <li><a href="#">歌手</a></li>
            <li><a href="#">新碟上架</a></li>
            </ul>
        </div>
    </nav>
</header>

  <!-- 整体的tab选项卡容器 -->
  <div class="han-settings-tab">
    <!-- tab标题栏 -->
    <div class="han-tab-titles">
      <span class="han-tab-title cur">基本信息</span>
      <span class="han-tab-title" >账号安全</span>
      <span class="han-tab-title" >隐私设置</span>
    </div>
    
    <!-- tab内容区 -->
    <div class="han-tab-contents">
      <!-- 基本信息设置内容 -->
      <div class="han-tab-content show" id="han-basic-info">
        <h2>基本信息</h2>
        <form action="#">
          <table border="0">
            <tr>
              <td><label for="nickname">昵称：</label></td>
              <td><input type="text" id="nickname" value="当前昵称"></td>
            </tr>
            <tr>
              <td><label for="gender">性别：</label></td>
              <td>
                <input type="radio" name="gender" id="male" value="男">男
                <input type="radio" name="gender" id="female" value="女" checked>女
              </td>
            </tr>
            <tr>
              <td><label for="birthday">生日：</label></td>
              <td>
                <input type="text" id="year" size="5">年
                <input type="text" id="month" size="5">月
                <input type="text" id="day" size="5">日
              </td>
            </tr>
            <tr>
              <td><label for="location">所在地：</label></td>
              <td><input type="text" id="location" value="当前所在地"></td>
            </tr>
            <tr>
              <td>
                <input type="submit" value="保存基本信息">
              </td>
            </tr>
          </table>
        </form>
      </div>

      <!-- 账号安全设置内容 -->
      <div class="han-tab-content" id="han-account-security">
        <h2>账号安全</h2>
        <form action="#">
          <table border="0">
            <tr>
              <td><label for="old-password">旧密码：</label></td>
              <td><input type="password" id="old-password"></td>
            </tr>
            <tr>
              <td><label for="new-password">新密码：</label></td>
              <td><input type="password" id="new-password"></td>
            </tr>
            <tr>
              <td><label for="confirm-password">确认新密码：</label></td>
              <td><input type="password" id="confirm-password"></td>
            </tr>
            <tr>
              <td colspan="2">
              <input type="submit" value="修改密码"></td>
            </tr>
          </table>
        </form>
        <p>为了保障您的账号安全，建议定期修改密码。</p>
      </div>

      <!-- 隐私设置内容 -->
      <div class="han-tab-content" id="han-privacy-settings">
        <h2>隐私设置</h2>
        <form action="#">
          <table border="0">
            <tr>
              <td><label for="profile-visibility">个人资料可见性：</label></td>
              <td>
                  <select id="profile-visibility">
                    <option value="public">公开</option>
                    <option value="private">仅好友可见</option>
                    <option value="hidden">隐藏</option>
                  </select>
              </td>
            </tr>
            <tr>
              <td><label for="play-history">播放历史可见性：</label></td>
              <td>
                <select id="play-history">
                  <option value="public">公开</option>
                  <option value="private">仅自己可见</option>
                </select>
              </td>
            </tr>
            <tr>
              <td><input type="submit" value="保存隐私设置"></td>
            </tr>
          </table>
        </form>
      </div>
    </div>
</div>


  <script>
    
    var settings = document.querySelector('.han-settings-tab');  // 获取整个tab区
    var tabTitlesContainer = settings.querySelector('.han-tab-titles');  // 获取标题栏
    var spans = tabTitlesContainer.querySelectorAll('span');  // 获取所有span标签 
    var tabContentsContainer = settings.querySelector('.han-tab-contents');  // 获取内容区域 
    var tabContents = tabContentsContainer.querySelectorAll('.han-tab-content');  // 获取所有tab内容区 

    for (var i = 0; i < spans.length; i++) {
        // 给每个标题添加一个自定义属性，用于记录当前标题的索引
        spans[i].dataset.index = i;
        // 给每个标题添加点击事件
        spans[i].addEventListener('click', function () {
            // 先隐藏所有tab内容
            for (var j = 0; j < tabContents.length; j++) {
                tabContents[j].classList.remove('show');
            }

            // 移除所有tab标题的选中状态样式
            for (var k = 0; k < spans.length; k++) {
                spans[k].classList.remove('cur');
            }

            // 根据当前点击的tab标题的索引，显示对应的tab内容并添加选中状态样式
            var index = this.getAttribute('data-index');
            tabContents[index].classList.add('show');
            this.classList.add('cur');
        });
      }
  </script>
</body>

</html>